<template>
  <!-- 职业列表组件 -->
  <div class="job-list">
    <!-- 面包屑路径导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>职业管理</el-breadcrumb-item>
      <el-breadcrumb-item>职业列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card">
      <el-row>
        <el-col :span="8">
          <div class="grid-content search-container">
            <el-input
              placeholder="请输入内容"
              v-model.trim="searchCont"
              clearable
              class="search-input"
              @clear="searchClear"
            >
            </el-input>
            <el-button
              type="info"
              plain
              icon="el-icon-search"
              @click="getMapList"
            ></el-button>
          </div>
        </el-col>
      </el-row>
      <el-table
        :data="
          tableData.filter(
            data =>
              !search || data.name.toLowerCase().includes(search.toLowerCase())
          )
        "
        style="width: 100%"
      >
        <el-table-column label="#" prop="date"> </el-table-column>
        <el-table-column label="职业" prop="name"> </el-table-column>
        <el-table-column label="角色卡" prop="roles"> </el-table-column>
        <el-table-column label="分类" prop="sorts"> </el-table-column>
        <el-table-column align="right" label="操作" prop="handle">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageConfig.currentPage"
          :page-sizes="pageConfig.pageSizes"
          :page-size="pageConfig.pageSize"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageConfig.pageTotal"
          :hide-on-single-page="false"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      searchCont: '',
      // 资源路径
      path: '',
      // 分页器参数配置
      pageConfig: {
        pageTotal: 0, // 分页器总条数
        pageSize: 10, // 每页显示条数
        pageSizes: [10, 15, 20, 25], // 可选择的每页条数
        currentPage: 1 // 分页器当前页码
      },
      // 加载层参数配置
      loadingConfig: {
        target: 'body',
        fullscreen: true,
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.1)',
        text: '拼命加载中'
      },
      tableData: [
        {
          date: '0011',
          name: '英雄',
          roles: '力量+40/80/100',
          sorts: '冒险家'
        }
      ],
      search: ''
    };
  },
  methods: {
    handleEdit (index, row) {
      console.log(index, row);
    },
    handleDelete (index, row) {
      console.log(index, row);
    }
  }
};
</script>

<style></style>
